<template>
	<view>
		<view class="detailDiv">
			<h4>{{detailData.title}}</h4>
			<p v-html="detailData.content"></p>
			<view class="detailDivBot">
				<view class="detailDivBot-item">发表于：{{detailData.createTime}}</view>
				<view class="detailDivBot-item"
					style="display: flex;align-items: center;justify-content: space-between;">
					发布人：{{detailData.author}}
					<view style="display: flex;align-items: center;justify-content: space-between;gap: 10rpx;"
						@click="setLike">
						<u-icon name="heart-fill" :color="islike?'#ff29b3':'#7b7b7b'"></u-icon>
						<span>{{detailData.likeCount}}</span>
					</view>
				</view>
			</view>
		</view>



		<!-- 评论 -->
		<view class="evalution" v-if="data.evaList?data.evaList.length>0:false">
			<view class="section-tit">评论</view>
			<view class="eva-list" :class="{Skeleton:!loaded}">
				<view v-for="(item, index) in data.evaList" :key="index" class="eva-item">
					<image :src="item.src" mode="aspectFill"></image>
					<view class="eva-right">
						<text>{{item.nickname}}</text>
						<text>{{item.time}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 分享 -->
		<share ref="share" :contentHeight="580" :shareList="shareList"></share>
	</view>
</template>

<script>
	import {
		getnewsGuideById
	} from '@/api/home.js'
	import {
		collectAdd,
		collectDelete
	} from '@/api/userCenter.js'
	import share from '@/components/share';
	export default {
		components: {
			share
		},
		data() {
			return {
				loaded: false,
				currentEpd: 1,
				data: {
					guessList: [{}, {}, {}, {}]
				},
				shareList: [],
				// 路径
				id: '',
				detailData: {},
				islike: false

			};
		},
		async onLoad(options) {
			this.id = options.id;
			this.getnewsGuideId(this.id)



			let detailData = await this.$api.json('detailData');
			let shareList = await this.$api.json('shareList');
			this.loaded = true;
			this.data = detailData;
			this.shareList = shareList;
			// 动态设置当前页面的标题
			// uni.setNavigationBarTitle({
			// 	title: detailData.title
			// })
		},
		methods: {
			// 获取攻略详情
			async getnewsGuideId(id) {
				let par = {
					id: id,
					userId: wx.getStorageSync('userInfo') ? wx.getStorageSync('userInfo').userId : ''
				}
				let res = await getnewsGuideById(par)
				if (res.code == 200) {
					this.detailData = res.data
					this.islike = res.data.islike
					console.log(res, 222);
				}
			},
			async setLike() {

				if (wx.getStorageSync('userInfo')) {
					if (this.islike) {
						let par = {
							userId: wx.getStorageSync('userInfo').userId,
							strategyCommodityId: this.detailData.id,
							type: 0
						}
						let res = await collectDelete(par)
						if (res.code == 200) {
							this.getnewsGuideId(this.id)
						}
					} else {
						let par = {
							userId: wx.getStorageSync('userInfo').userId,
							strategyCommodityId: this.detailData.id,
							type: 0
						}
						let res = await collectAdd(par)
						if (res.code == 200) {
							this.getnewsGuideId(this.id)
						}
					}

				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}



			},

			//分享
			share() {
				this.$refs.share.toggleMask();
			},
			//收藏
			favorite() {
				this.data.favorite = !this.data.favorite;
			}
		},
		//处理遮罩层物理返回键
		onBackPress() {
			if (this.$refs.share.show) {
				this.$refs.share.toggleMask();
				return true;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;

		.detailDiv {
			margin-top: 20rpx;
			background-color: #fff;
			padding: 20rpx;

			.detailDivBot {
				margin-top: 20rpx;

				.detailDivBot-item {
					margin-bottom: 20rpx;
					font-size: 22rpx
				}
			}

			h4 {
				font-size: 80rpx;
				margin-bottom: 20rpx;

			}
		}
	}


	.carousel {
		height: 200px;

		.image-wrapper {
			display: flex;
			justify-content: center;
			align-content: center;
			width: 100%;
			height: 100%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.scroll-view-wrapper {
		display: flex;
		align-items: center;
		height: 90upx;
		padding: 20upx 0 20upx 40upx;
		background: #fff;
	}

	.episode-panel {
		white-space: nowrap;
		width: 100%;

		view {
			display: inline-block;
			margin-right: 30upx;
			width: 56upx;
			font-size: $font-lg;
			color: $font-color-base;

			&.current {
				color: #07a7a7;
			}
		}
	}

	.info {
		display: flex;
		align-items: center;
		padding: 10upx 40upx;
		background: #fff;

		.title {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-lg + 4upx;
			color: $font-color-dark;

			text:last-child {
				font-size: $font-sm;
				color: $font-color-light;
				margin-top: 4upx;

				&.Skeleton {
					width: 220upx;
				}
			}
		}

		.yticon {
			font-size: 44upx;
			color: $font-color-base;
			margin: 0 10upx 0 30upx;
		}
	}

	.actions {
		padding: 10upx 28upx;
		background: #fff;

		.yticon {
			font-size: 46upx;
			color: $font-color-base;
			padding: 10upx 12upx;

			&.active {
				color: #ff4443;
			}

			&:nth-child(2) {
				font-size: 50upx;
			}
		}
	}

	.section-tit {
		font-size: $font-base+2upx;
		color: $font-color-dark;
		margin-bottom: 30upx;
		text-align: center;
	}

	.guess {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30upx 40upx 10upx;
		margin-top: 16upx;
		background: #fff;
	}

	.guess-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	.guess-item {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		min-width: 40%;
		margin-right: 26upx;
		padding-bottom: 40upx;

		&:nth-child(2n) {
			margin-right: 0;
		}

		image {
			width: 100%;
			height: 200upx;
			border-radius: 10upx;
		}

		text {
			font-size: $font-sm;
			color: $font-color-light;

			&.Skeleton {
				width: 180upx;

				&.title {
					width: 140upx;
				}
			}

			&.title {
				font-size: $font-base+2upx;
				color: $font-color-dark;
				margin-top: 16upx;
				margin-bottom: 8upx;
			}
		}
	}

	.evalution {
		display: flex;
		flex-direction: column;
		background: #fff;
		margin-top: 16upx;
		padding: 40upx 0;
	}

	.eva-item {
		display: flex;
		padding: 20upx 40upx;

		image {
			width: 60upx;
			height: 60upx;
			border-radius: 50px;
			flex-shrink: 0;
			margin-right: 24upx;
		}
	}

	.eva-right {
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size: $font-sm + 2upx;
		color: $font-color-light;
		position: relative;

		.zan-box {
			display: flex;
			align-items: base-line;
			position: absolute;
			top: 10upx;
			right: 10upx;

			.yticon {
				margin-left: 8upx;
			}
		}

		.content {
			font-size: $font-base;
			color: #333;
			padding-top: 20upx;
		}
	}
</style>